<template>
<div class="carousel">
    <swiper
        :slidesPerView="1"
        :space-between="0"
        :pagination="{ clickable: true }"
        :loop="true"
        :autoplay="{
            delay: 2500,
            disableOnInteraction: false,
        }"
        :modules="modules"
    >
        <swiper-slide v-for="item in carouselImg" :key="item">
            <img :src="item.s_photos[0].path">
        </swiper-slide>
    </swiper>
</div>
</template>

<script setup>
import {ref} from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay,Pagination} from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
    let  modules = [Autoplay,Pagination];
    let url = 'http://shop.bluej.cn/api/carousel?project_id=241';
    let carouselImg = ref([]);
    fetch(url).then(res=>res.json()).then(res=>{carouselImg.value = res.result});
</script>

<style lang="scss" scoped>
.carousel{
    margin: auto;
    margin-top: 0.12rem;
    margin-bottom: 0.08rem;
    overflow: hidden;
    width: 3.4rem;
    height: 0.86rem;
    border-radius: 0.05rem;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 0.86rem;
  object-fit: cover;
}

</style>